<template>
  <div class="courseContents">
    <!-- 课时信息 -->
    <el-row>
        <!-- 日期 -->
        <el-col :span="6">
            <div class="layui-inline" id="test-n1"></div>
        </el-col>
        <!-- 课程列表 -->
        <el-col :span="10">
            <el-row>
                <div class="addButton">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"  @change="handleCheckAllChange">全选</el-checkbox>
                    <div>
                        <i style="font-size:25px;color:#999" class="el-icon-refresh-right marginLeft"></i>
                        <i style="font-size:25px;color:#999" class="el-icon-delete marginLeft"></i>
                        <el-button class="marginLeft" type="primary">添加单节课</el-button>
                        <el-button class="marginLeft" type="primary">添加周期课</el-button>
                    </div>
                </div>    
                <div class="courseList">
                    <ul>
                        <li v-for="city in cities"  :key="city">
                            <div class="addButton">
                                <el-checkbox :label="city" @change="handleCheckedCitiesChange">{{city}}</el-checkbox>
                                <i  style="font-size:16px;color:#09a3dc" class="el-icon-edit"></i>
                            </div>
                            <div class="courselist_p">
                                <p>
                                    <span>准备物料：</span>物料内fdsaf的师傅的说法的是dsfadsfadsfsdafdsfadsafdsafdsafdsfadsfadsfdsfdsafs容
                                </p>
                                <p>
                                    <span>准备物料：</span>物料内容的固定杆阿范德萨发第三方第三方的否打发第三方的示范的 是 
                                </p>
                            </div>
                            <div class="courseDateSpan">
                                <span>8月12日</span>
                                <span>上午9:30</span>
                                <span>预计60分钟</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-row>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'courseContent',
  data(){
      return{
          value1: '',//当前日
          checkAll: false,
        checkedCities: [],//选中的
        cities: ['第一节课', '第二节课', '第三节课', '第四节课'],//列表
        isIndeterminate: true
      }
  },
  methods:{
      courseDate(){
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#test-n1',//绑定控件
                    position: 'static',//默认定位到页面
                    showBottom: false,//控制底部栏的显示
                    change: function(value, date){ //监听日期被切换
                        // lay('#testView').html(value);
                        console.log(value,date)
                    },
                    value:'',
                    multiple:'',
                    circleMark:true
                });
            })
        },
        // 全选
        handleCheckAllChange(val) {
            console.log(val)
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
    //   单选
      handleCheckedCitiesChange(value) {
          console.log(value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
  },
  mounted(){
    this.courseDate()
  },
  created(){
      
  }
}
</script>

<style lang="less" scoped>
.el-col-6{
    margin-top:30px;
}
.addButton{
    display: flex;
    align-items: center;
    justify-content: space-between;
    div{
        display: flex;
        align-items: center;
        .marginLeft{
            margin: 0 5px;
        }
    }
}
.courseList{
    padding: 20px 0;
}
li{
    border: 1px solid #999;
    padding: 10px;
    margin: 10px 0;
    .courselist_p{
        margin-left: 60px;
        font-size: 14px;
        margin-bottom: 40px;
        margin-top: 10px;
        p{
            margin: 10px 0;
            white-space:nowrap;// (不允许换行）
            Overflow:hidden;
            text-overflow:ellipsis;
        }
    }
    .courseDateSpan{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        :nth-child(1){
            font-size: 20px;
        }
        :nth-child(2){
            margin-left:120px;
            margin-right: 30px;
        }
    }
}

</style>
